import React from "react";
import ColorPicker from "react-color"

import './home_right.css'
import { Popover, Button, Divider, Descriptions, Radio, Space, message, Card } from "antd";
import { DownloadOutlined } from '@ant-design/icons';
import PubSub from "pubsub-js";
import axios from "axios";


export default class Home_right extends React.Component{
    constructor(props) {
      super(props);
      this.state = {
        name:'',
        sex:'',
        age:'',
        doctor:'',
        stage:'',
        date:'',
        image_name:'',
        value:1,
        old_image: '',
        point_image: '',
        outlines_image: '',
        point_and_outlines_image: '',
      }
    }

    componentDidMount(){
      PubSub.subscribe('sendImageUrlParam', (name, record) => {
        this.setState({
          name: record.p_name,
          sex: record.p_sex,
          age: record.p_age,
          doctor: record.doctor,
          stage: record.stage,
          date: record.date,
          image_name: record.image_name,
          old_image: record.image_file,
          point_image: '',
          outlines_image: '',
          point_and_outlines_image: '',
        })
        let data = { image_file: record.image_file }
        let url = '/registrationapi/queryextraimage'
        axios.post(url, data, {headers: {'Content-Type': 'application/json'}}
          ).then(res=>{
            if(res.status === 200 && res.data.code === 0){
              this.setState({
                point_image: res.data.extra_image.point_image_base64,
                outlines_image: res.data.extra_image.outlines_image_base64,
                point_and_outlines_image: res.data.extra_image.point_and_outlines_image_base64,
              })
            } else{
              message.error(res.data.msg)
            }
        })
      })
      PubSub.subscribe('sendPointImage', (name, data) => {
        this.setState({
          point_image: data.extra_image.point_image_base64,
          outlines_image: data.extra_image.outlines_image_base64,
          point_and_outlines_image: data.extra_image.point_and_outlines_image_base64
        })
      })
      PubSub.subscribe('sendOutlinesImage', (name, data) => {
        this.setState({
          point_image: data.extra_image.point_image_base64,
          outlines_image: data.extra_image.outlines_image_base64,
          point_and_outlines_image: data.extra_image.point_and_outlines_image_base64
        })
      })
      PubSub.subscribe('sendValue', (name, value) => {
        this.setState({
          value: value,
        })
      })
    }

    onChange = e => {
      console.log('radio checked', e.target.value);
      // 将单选框选择的图像传递给中间部分
      switch (e.target.value) {
        case 1:
          PubSub.publish("sendFourImage", this.state.old_image);
          let data = { image_file: this.state.old_image }
          let url = '/registrationapi/queryextraimage'
          axios.post(url, data, {headers: {'Content-Type': 'application/json'}}
            ).then(res=>{
              if(res.status === 200 && res.data.code === 0){
                if (res.data.extra_image.point_image_base64 === '') {
                  let orderNumber = 1;
                  PubSub.publish("sendOrderNumber0", orderNumber);
                } else {
                  let orderNumber = 2;
                  PubSub.publish("sendOrderNumber0", orderNumber);
                }
              } else{
                message.error(res.data.msg)
              }
          })
          break;
        case 2:
          PubSub.publish("sendFourImage", this.state.point_image);
          let orderNumber2 = 0;
          PubSub.publish("sendOrderNumber0", orderNumber2);
          break;
        case 3:
          PubSub.publish("sendFourImage", this.state.outlines_image);
          let orderNumber3 = 0;
          PubSub.publish("sendOrderNumber0", orderNumber3);
          break;
        case 4:
          PubSub.publish("sendFourImage", this.state.point_and_outlines_image);
          let orderNumber4 = 0;
          PubSub.publish("sendOrderNumber0", orderNumber4);
          break;
      }
      this.setState({
        value: e.target.value,
      });
    };

    render() {
        return (
          <div className="home_right">
            <div className="home_top">
              <Descriptions bordered column={1} title="相关信息" >
                <Descriptions.Item label="姓名">{this.state.name}</Descriptions.Item>
                <Descriptions.Item label="性别">{this.state.sex}</Descriptions.Item>
                <Descriptions.Item label="年龄">{this.state.age}</Descriptions.Item>
                <Descriptions.Item label="主治医生">{this.state.doctor}</Descriptions.Item>
                <Descriptions.Item label="诊疗阶段">{this.state.stage}</Descriptions.Item>
                <Descriptions.Item label="拍摄时间">{this.state.date}</Descriptions.Item>
                <Descriptions.Item label="图片名称">{this.state.image_name}</Descriptions.Item>
              </Descriptions>
            </div>
            <div className="home_bottom">
              <Card style={{ width: 240, marginLeft: 20, background: '#141316' }}>
                <Radio.Group onChange={this.onChange} value={this.state.value}>
                  <Space direction="vertical">
                    <Radio value={1} disabled={this.state.old_image === ''}>显示原始图片</Radio>
                    <Radio value={2} disabled={this.state.point_image === ''}>显示特征点</Radio>
                    <Radio value={3} disabled={this.state.outlines_image === ''}>显示轮廓</Radio>
                    <Radio value={4} disabled={this.state.point_and_outlines_image === ''}>显示特征点和轮廓</Radio>
                  </Space>
                </Radio.Group>
              </Card>
              <Card style={{ width: 240, marginLeft: 20, marginTop: 10, background: '#141316' }}>
                <Popover content={<ColorPicker />}>
                  <Button style={{ marginLeft: 20 }} size={'large'} >选择特征点颜色</Button>
                </Popover>
                <Popover content={<ColorPicker />}>
                  <Button style={{ marginLeft: 20 }} size={'large'} >选择轮廓线颜色</Button>
                </Popover>
              </Card>
            </div>
          </div>
        )
    }
}